<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { getPageAssets, updatePageAssets } from "./api";

const loading = ref(false);
const form = reactive({
    homeOrganizeLogo: "",
    homeCanvasBg: "",
    homeYYSLSlogo: "",
    videoOrganizeLogo: "",
    videoTxt: "",
    videoYYSLSlogo: "",
    bookBg: "",
    characterAvatarList: "",
    characterLeftTextBg: "",
    characterRightVideoBg: "",
    homeNavText: "",
    videoNavText: "",
    bookNavText: "",
    characterNavText: "",
});

async function fetchAssets() {
    try {
        const res = await getPageAssets();
        Object.assign(form, res);
    } catch (e) {
        ElMessage.error("获取数据失败");
    }
}

async function handleSave() {
    loading.value = true;
    try {
        await updatePageAssets({
            operatorId: sessionStorage.getItem("user_id"),
            ...form,
        });
        ElMessage.success("保存成功");
        fetchAssets();
    } catch (e) {
        ElMessage.error(e?.response?.data?.error || "保存失败");
    } finally {
        loading.value = false;
    }
}

onMounted(fetchAssets);
</script>

<template>
    <div style="max-width: 900px; margin: 40px auto">
        <el-card>
            <el-form :model="form" label-width="140px">
                <el-row :gutter="32">
                    <el-col :span="12">
                        <el-form-item label="主页社团Logo">
                            <el-input v-model="form.homeOrganizeLogo" />
                            <el-image
                                v-if="form.homeOrganizeLogo"
                                :src="form.homeOrganizeLogo"
                                style="width: 4rem; height: 6rem"
                                fit="contain"
                                :preview-src-list="[form.homeOrganizeLogo]"
                                preview-teleported
                            />
                        </el-form-item>
                        <el-form-item label="主页背景图">
                            <el-input v-model="form.homeCanvasBg" />
                            <el-image
                                v-if="form.homeCanvasBg"
                                :src="form.homeCanvasBg"
                                style="width: 4rem; height: 6rem"
                                fit="contain"
                                :preview-src-list="[form.homeCanvasBg]"
                                preview-teleported
                            />
                        </el-form-item>
                        <el-form-item label="主页YYSLSlogo">
                            <el-input v-model="form.homeYYSLSlogo" />
                            <el-image
                                v-if="form.homeYYSLSlogo"
                                :src="form.homeYYSLSlogo"
                                style="width: 4rem; height: 6rem"
                                fit="contain"
                                :preview-src-list="[form.homeYYSLSlogo]"
                                preview-teleported
                            />
                        </el-form-item>
                        <el-form-item label="主页导航文本">
                            <el-input v-model="form.homeNavText" />
                        </el-form-item>
                        <el-form-item label="视频百业Logo">
                            <el-input v-model="form.videoOrganizeLogo" />
                            <el-image
                                v-if="form.videoOrganizeLogo"
                                :src="form.videoOrganizeLogo"
                                style="width: 4rem; height: 6rem"
                                fit="contain"
                                :preview-src-list="[form.videoOrganizeLogo]"
                                preview-teleported
                            />
                        </el-form-item>
                        <el-form-item label="视频YYSLSlogo">
                            <el-input v-model="form.videoYYSLSlogo" />
                            <el-image
                                v-if="form.videoYYSLSlogo"
                                :src="form.videoYYSLSlogo"
                                style="width: 4rem; height: 6rem"
                                fit="contain"
                                :preview-src-list="[form.videoYYSLSlogo]"
                                preview-teleported
                            />
                        </el-form-item>
                        <el-form-item label="视频其他文字图片">
                            <el-input v-model="form.videoTxt" />
                            <el-image
                                v-if="form.videoTxt"
                                :src="form.videoTxt"
                                style="width: 4rem; height: 6rem"
                                fit="contain"
                                :preview-src-list="[form.videoTxt]"
                                preview-teleported
                            />
                        </el-form-item>
                        <el-form-item label="视频导航文本">
                            <el-input v-model="form.videoNavText" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="册子背景图">
                            <el-input v-model="form.bookBg" />
                            <el-image
                                v-if="form.bookBg"
                                :src="form.bookBg"
                                style="width: 4rem; height: 6rem"
                                fit="contain"
                                :preview-src-list="[form.bookBg]"
                                preview-teleported
                            />
                        </el-form-item>
                        <el-form-item label="册子导航文本">
                            <el-input v-model="form.bookNavText" />
                        </el-form-item>
                        <el-form-item label="侠客头像列表">
                            <el-input v-model="form.characterAvatarList" />
                            <el-image
                                v-if="form.characterAvatarList"
                                :src="form.characterAvatarList"
                                style="width: 4rem; height: 6rem"
                                fit="contain"
                                :preview-src-list="[form.characterAvatarList]"
                                preview-teleported
                            />
                        </el-form-item>
                        <el-form-item label="侠客左侧文字背景">
                            <el-input v-model="form.characterLeftTextBg" />
                            <el-image
                                v-if="form.characterLeftTextBg"
                                :src="form.characterLeftTextBg"
                                style="width: 4rem; height: 6rem"
                                fit="contain"
                                :preview-src-list="[form.characterLeftTextBg]"
                                preview-teleported
                            />
                        </el-form-item>
                        <el-form-item label="侠客右侧视频背景">
                            <el-input v-model="form.characterRightVideoBg" />
                            <el-image
                                v-if="form.characterRightVideoBg"
                                :src="form.characterRightVideoBg"
                                style="width: 4rem; height: 6rem"
                                fit="contain"
                                :preview-src-list="[form.characterRightVideoBg]"
                                preview-teleported
                            />
                        </el-form-item>
                        <el-form-item label="侠客导航文本">
                            <el-input v-model="form.characterNavText" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" style="text-align: center">
                        <el-form-item>
                            <el-button
                                type="primary"
                                :loading="loading"
                                @click="handleSave"
                                >保存</el-button
                            >
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
    </div>
</template>
   